@use 'sass:color';
.question-and-answer-page{
    padding: 0;
    position: relative;
    background-color: #eee;
    
    .download-btn{
        position: fixed;
        right: 25px;
        bottom: 25px;
        background-color: rgb(144,180,206);
        color: #fff;
        padding: 10px 20px;
        border-radius: 4px;
        font-size: 14px;
        opacity: 0.85;
        cursor: pointer;
        box-shadow: 0 0 6px 3px rgba(#000, 0.1);
        &:hover{
            opacity: 1;
            text-decoration: underline;
        }
    }

    .left-tabs{
        position: fixed;
        left: 0;
        bottom: 22px;
        li{
            cursor: pointer;
            border-top-right-radius: 24px;
            border-bottom-right-radius: 24px;
            padding: 9px 17px 9px 27px;
            color: #fff;
            font-size: 14px;
            transition: all 0.45s ease-out;
            background-color: rgba(144,180,206, 0.75);
            box-shadow: 0 0 6px 3px rgba(#000, 0.1);
            transform: translateX(-15px);
            &:not(:last-child){
                margin-bottom: 10px;
            }
            &.active{
                transform: translateX(0px);
                text-decoration: underline;
                font-weight: bold;
                background-color: rgba(144,180,206);
            }
            &:hover{
                text-decoration: underline;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .question-and-answer-page{
        .download-btn{
            right: 12px;
            bottom: 12px;
            padding: 8px 15px;
            font-size: 11px;
        }

        .left-tabs{
            bottom: 12px;
            li{
                padding: 6px 14px 6px 20px;
                font-size: 11px;
                &:not(:last-child){
                    margin-bottom: 7px;
                }
            }
        }
    }
}